<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<template id="tp1">
<!--  div必须加！！！-->
  <div>
  <h1>计数器组件</h1>
  {{counter}}
  <br>
  <button @click="btnclick">+</button>
  <button @click="ctnclick">-</button>
  </div>
</template>


<div id="app">
  <mycop1></mycop1>
  <mycop1></mycop1>
  <mycop1></mycop1>

</div>

<script src="../js/vue.js"></script>
<script>
  Vue.component('mycop1',{
    template:"#tp1",
    data(){
      return {counter:0}
    },
    methods:{
      btnclick(){
        this.counter++
      },
      ctnclick(){
        this.counter--
      }
    }
  })

  const app = new Vue({
    el:"#app",
    data: {
      message:"stupid mother fucker"
    }
  })
</script>
</body>
</html>